.commentInput {
  position: relative;
  padding: 0.5rem;
  border: 1px solid var(--main-title-hr-color);
  border-radius: 4px;
  .title {
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--main-title-hr-color);
    .star {
      display: flex;
      * {
        margin-right: 0.5rem;
      }
    }
  }
  .edit {
    flex-grow: 1;
    height: 6rem;
    textarea {
      width: 100%;
      height: 100%;
      border: 0px;
      outline: 0px;
      resize: none;
    }
  }
  .fixed {
    position: absolute;
    right: 50%;
    top: 60%;
    color: gray;
    button {
      padding: 0 1rem;
    }
  }
  textarea {
    background-color: var(--main-bg-color);
  }
}
.submit {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0;
  .submitError {
    color: red;
  }
  .submitBtn {
    margin-left: 0.5rem;
  }
}

.profile {
  border-radius: 4px;
  margin: 0 0.5rem;
  vertical-align: middle;
  height: 3rem;
  width: 3rem;
  min-height: 3rem;
  border-radius: 50%;
  cursor: default;
  &.min {
    width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
  }
  &.default {
    animation: loading 1s infinite alternate;
  }
  @keyframes loading {
    from {
      filter: brightness(0.5);
    }
    to {
      filter: brightness(0.8);
    }
  }
}
.myInfo {
  $url: '/assets/buttons/down';
  .name {
    &:after {
      display: inline-block;
      content: '';
      width: 9px;
      height: 9px;
      margin-left: 0.5rem;
      background-repeat: no-repeat;
      background-position-x: 0, 9px, 9px;
      background-image: var(--down-icon);
    }
  }
  &:hover {
    .name:after {
      background-position-x: 9px, 0, 9px;
    }
  }
  &:active {
    .name:after {
      background-position-x: 9px, 9px, 0;
    }
  }
}
.dropdown-menu {
  position: absolute;
  top: 2rem;
  border: 1px solid var(--main-title-hr-color);
  background-color: var(--main-bg-color);
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  a {
    color: var(--main-color);
  }
}

.commentList {
  .header {
    display: flex;
    justify-content: space-between;
    .select {
      button {
        border-radius: 4px;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
        padding: 0.3rem 1rem;
        cursor: pointer;
        &:first-child {
          border-right: none;
          border-radius: 4px 0 0 4px;
        }
        &:last-child {
          border-left: none;
          border-radius: 0 4px 4px 0;
        }
      }
    }
  }
  .body {
    border: 1px solid var(--main-title-hr-color);
    border-radius: 4px;
    .empty {
      height: 5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      &.error {
        color: red;
      }
    }
    .list {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      tr {
        td:first-child {
          width: 5rem;
          padding: 0 0.5rem;
        }
      }
      td:nth-child(2n + 1) {
        min-height: 5rem;
        border-bottom: 1px solid var(--main-item-hr-color);
      }
      .head {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 0.5rem;
        span {
          text-align: center;
          overflow: hidden;
          width: 100%;
          text-overflow: ellipsis;
        }
      }
      .top {
        display: flex;
        justify-content: space-between;
        padding: 0.4rem;
        .rate {
          display: flex;
        }
        .right {
          display: flex;
          .time {
            color: gray;
          }
        }
      }
      .content {
        /* autoprefixer: off */
        // autoprefixer remove -webkit-box-orient
        min-height: 4.5rem;
        overflow: hidden;
        word-wrap: break-word;
        user-select: text;

        display: -webkit-box;
        -webkit-line-clamp: 8;
        -webkit-box-orient: vertical;
      }
      .like {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 2.5rem;
        .hidden {
          visibility: hidden;
        }
        .thumbUp {
          width: 1rem;
          height: 1rem;
          content: url('/assets/buttons/thumbup_normal.svg');
          &:hover {
            content: url('/assets/buttons/thumbup_hover.svg');
          }
          &.active {
            content: url('/assets/buttons/thumbup_press.svg');
          }
        }
      }
    }
  }
}
.bottom {
  display: flex;
  padding: 0.5rem 0;
  justify-content: space-between;
  align-items: center;
}
